@charset "utf-8";

/* 设置 body 方便观察 */
body{
	margin: 100px;
	height: 900px;
	border: solid black 1px;
}

div, header{
	width: 150px;
	height: 150px;
}

header{
	background-color: green;
}

div{
	background-color: silver;
}
/********************************** 绝对位置 **********************************/
/* 设置绝对位置，脱离文档流，以窗口文档左上角 0,0 为起点。
 * 脱离文档流，就是本身这个元素在文档流是占位的。如果脱离了，就不占有文档的位置，好像浮在空中一般，有了层次感。
 * 此时元素会随之滚动条滚动而滚动
 */
header{
	/*position: absolute;
	top: 0;
	left: 0;*/
}

div{
	/*position: absolute;
	top: 10px;
	left: 10px;*/
}
/* 给 header 与 div 设置绝对位置后，出现层次，其中 header 在下边，想要让 header 来到上方，设置 z-index */
header{
	/*z-index: 2;*/
}

/********************************** 相对定位 **********************************/
/*
* 相对定位，是相对元素正常的位置来说的。
*/
header{
	/*position: relative;
	top: 50px;
	left: 100px;*/
}
/********************************** 以窗口参考点位 **********************************/
/*  
 * 以窗口参考位置，脱离文档流，会随着滚动条滚动而滚动
*/

header{
	/*position: fixed;
	top: 0;
	left: 0;*/
}

div{
	/*position: fixed;
	top: 10px;
	left: 10px;*/
}
/********************************** 特殊情况 **********************************/
/*
 * 这三种均比较常用。还有一种情况，就是：a. 既要脱离文档流（这样元素之间不会相互冲突）；b. 以父元素，比如 body 或其它父元素为参考点（这样可以实现区域性绝对定位）；c. 必须是绝对定位。
*/
/* 第一步，将需要设置参考点的父元素设置为相对，且不设置坐标 */
body{
	position: relative;
}
/* 第二步，如果父元素设置了参考点，子元素的绝对位置将以它为基准 */
header{
	position: absolute;
	top: 30px;
	left: 80px;
}

/********************************** resize，配合 overflow: auto 使用 **********************************/
/*
 * textarea 默认是可以拖拽更改大小的
*/
textarea{
	overflow: auto;

	/* 只允许调整高度 */
	/*resize: vertical;*/

	/* 只允许调整宽度 */
	/*resize: horizontal;*/

	/* 不允许调整宽高 */
	resize: none;
}

